<template>
  <div class="echarts"></div>
</template>

<script>
import * as echarts from "echarts";
import { markRaw } from "vue";
export default {
  props: {
    isUpdate: String,
    option: {
      type: Object,
      default: function () {
        return {
          type: "default",
        };
      },
    },
    chose: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    // 防止配置改变后不更新配置，重新加载配置即可
    option: {
      deep: true,
      handler() {
        if (this.chart) {
          this.chart.setOption(this.option);
        }
      },
    },
    // 自适应大小
    // isUpdate() {
    //   if (this.chart) {
    //     this.chart.resize();
    //   }
    // },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    setTimeout(() => {
      // this.echart && this.echart.resize()
      this.initChart();
    }, 100)
    window.addEventListener("resize", this.handleWindowResize);
  },
  methods: {
    initChart() {
      let index = 0
      this.chart = markRaw(echarts.init(this.$el, "dark")); //获取自身dom元素
      // this.chart = echarts.init(this.$el, 'dark')
      if (this.option.type != "default") {
        this.chart.setOption(this.option);
      }
      if (this.chose) {
        this.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 1,//默认选中第二个
        })
      } else {
        if (this.option.series[0]) {
          this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: 0
          })
          setInterval(() => {
            index++
            if (index > this.option.series[0].data.length - 1) {
              index = 0
            }
            this.chart.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: index
            })
          }, 3000)
        }
      }
    },

    handleWindowResize() {
      console.log("resize....");
      setTimeout(() => {
        this.chart && this.chart.resize();
      }, 100)
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.echarts {
  width: 100%;
  height: 100%;

}
</style>